<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">
			  
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function(){
		//为什么要将doGetObjects函数写到load函数对应的回调函数内部
		$("#pageId").load("doPageUI",function() {
			doGetObjects();
		});
		$(".input-group-btn")
				.on("click",".btn-search",doQueryObjects)
	});

	//定义查询按钮对应点击事件函数处理函数
	function doQueryObjects() {
		//为什么要在此为值初始化pageCurrent的值为1
		//数据查询时页码的初始值也应该是第一页
		$("#pageId").data("pageCurrent",1);
		//为什么要掉用doGetObjects函数？
		//重用js代码简化js代码的编写
		doGetObjects();
	}



	//定义异步请求处理函数---在分页查询函数中追加name参数定义
	function doGetObjects() {
		//定义url和参数
		let url="log/doFindPageObjects";
		//请问data函数的含义是什么？（从指定元素上获取绑定的数据）
		//此数据会在何时进行绑定？(setPagination。doQueryObjects)
		let pageCurrent=$("#pageId").data("pageCurrent");
		//为什么要执行如下语句的判定，然后初始化pageCurrent的值为1
		//pageCurrent参数在没有复制的情况下，默认初始值应该为1
		if (!pageCurrent)pageCurrent=1;
		let params={"pageCurrent":pageCurrent};
		//为什么此位置要获取查询参数的值？
		//一种冗余的应用方法，目的是让此函数在查询时可以重用
		let username=$("#searchNameId").val();
		//如下语句的含义是什么？动态在json格式的js对象中添加key/value
		if (username) params.username=username;//查询时需要
		//发起异步请求
		//访问如下ajax请求的回调函数参数名可以是任意吗？--可以，必须符合标识符的规范
		$.getJSON(url,params,function (result) {
			//请问result是一个字符串还是json格式的js对象？对象
			doHandleQueryResponseResult(result);

		});
	}
	//定义回调函数，处理服务端的响应结果
	function doHandleQueryResponseResult(result) {//JsonResult
		if(result.state==1){//ok
			//更新table中tbody内部的数据
			doSetTableBodyRows(result.data.records);//将数据呈现在页面上
			//更新页面page.html分页数据
			doSetPagination(result.data);//此方法写到page.html中
		}else{
			alert(result.message);
		}
	}
	//将异步响应的结果呈现在table的tBody位置
	function doSetTableBodyRows(records) {
		//获取tbody对象，并清空对象
		let tBody=$("#tbodyId");
		tBody.empty();
		//迭代records记录，并将其内容追加到tbody
		for (var i in records){
			//构建tr对象
			let tr=$("<tr></tr>");
			//构建tds对象
			let tds=doCreateTds(records[i]);
			//将tds追加到tr中
			tr.append(tds);
			//将tr追加到tbody中
			tBody.append(tr);
		}
	}
	//创建每行中的td元素，并填充具体业务数据
	function doCreateTds(data) {
		let tds="<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'/></td>"+
				"<td>"+data.username+"</td>"+
				"<td>"+data.operation+"</td>"+
				"<td>"+data.method+"</td>"+
				"<td>"+data.params+"</td>"+
				"<td>"+data.ip+"</td>"+
				"<td>"+data.time+"</td>";
		return tds;

	}
</script>






